/*
 * @Author: luojian jian.luo@macrowing.com
 * @Date: 2024-05-15 11:08:27
 * @LastEditors: luojian jian.luo@macrowing.com
 * @LastEditTime: 2024-05-24 15:28:17
 * @FilePath: \JiangHeBiWeb\src\pages\jhDataCenter\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState } from 'react';
import { HlDataCenterStyled } from './style';
import footer from '@/assets/images/footer.png';
import AllView from './components/allView';
import { useDispatch, useSelector } from 'react-redux';
import { get_edrms_type } from '@/store/actions/main';
import Solar from 'chinese-lunar';
import moment from 'moment'; // 时间插件 
import { getWeather } from '@/services/index';
import fullscreen from '../../assets/images/fullscreen.png';

const HlDataCenter = () => {
    const dispatch = useDispatch();
    const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    const date = new Date();
    const [dayOfWeek, setDayOfWeek] = useState<any>(days[date.getDay()]);
    const [weatherInfo, setWeatherInfo] = useState<any>({});
    const [time, setTime] = useState(new Date());
    const [cumulativeDay, setCumulativeDay] = useState<any>("");
    const [isWeatherSuccess, setIsWeatherSuccess] = useState<boolean>(false);

    useEffect(() => {
        const interval = setInterval(() => {
            setTime(new Date());
        }, 1000);
        getWeather("武进区").then((res) => {
            setWeatherInfo(res);
            setIsWeatherSuccess(res)
        }).catch((error) => {
            console.log('天气接口出错了');
            setIsWeatherSuccess(false)
        });
        setCumulativeDay(getDaysBetweenDates('2024/01/15 00:00:00'));
        return () => clearInterval(interval);
    }, []);
    const lunar = Solar.solarToLunar(new Date());
    const formatLunar = Solar.format(lunar, "MD");
    const [lunarDate, setLunarDate] = useState(formatLunar);

    const getDaysBetweenDates = (day: any) => {
        // 将日期字符串转换为Date对象
        var d1 = new Date(day);
        var d2 = new Date();

        // 计算两个日期的时间差（毫秒）
        var timeDiff = Math.abs(d2.getTime() - d1.getTime());
        // 计算天数
        var days = Math.ceil(timeDiff / (1000 * 3600 * 24));

        return days;
    }

    return (
        <HlDataCenterStyled>
            <div className='top'>
                <div className='top-left'>
                    <div className='text'>
                        <span className='time'>{moment(time).format("yyyy年MM月DD日 HH:mm:ss  ")}</span><span>{dayOfWeek}</span>
                    </div>
                </div>
                <div className='title'>
                    <div className='title-name'>档案管理数据中心</div>
                </div>
                <div className='top-right'>
                    {/* <div className='text'>
                        农历{lunarDate} {isWeatherSuccess && <span style={{ marginLeft: 15 }}>{weatherInfo?.city} {weatherInfo?.temperature}℃ {weatherInfo?.weather} </span>} <span style={{ marginLeft: 15 }}>系统累计运行{cumulativeDay}天</span>
                    </div> */}
                    <div className="fullscreen">
                        {/* <img onClick={() => document.body.requestFullscreen()} src={fullscreen}></img> */}
                    </div>
                </div>
            </div>
            <div className='middle'>
                {<AllView />}
            </div>
            <div className='bottom'>
                {/* <img src={footer} alt='' /> */}
            </div>
        </HlDataCenterStyled>
    );
};

export default HlDataCenter;
